<html>
	<head>
		<title>Identity Toolkit Python Lib Sample Page</title>
		<meta name="keywords" content="Identity Toolkit, GIT, Google, Federated Login, federated, python, python lib" />
		<meta name="description" content="Identity Toolkit Python Lib is a library for integrating with your websites to enable federated login. This is the sample websites to tell you how to integrated with your websites." />
		<link href="/script/sample.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div style="width:740px;margin:0 auto;overflow:hidden;">
			<div style="position:relative;background:url('http://photos1.blogger.com/x/blogger2/1999/969950576445500/1600/z/458950/gse_multipart19246.jpg') no-repeat;width:735px;height:122px;">
				<div style="position:absolute;top:40px;left:230px;font-weight:bold;font-size:26px;color:#666666">
					Google Identity Toolkit Sample Site
				</div>
				<div style="position:absolute;top:80px;right:100px;font-size:16px;color:#929292;font-weight:bold">
					GOOGLE NEWS AGGREGATOR
				</div>
				<div style="position:absolute;top:10px;right:15px">
					<div id="navbar"></div>
				</div>
			</div>
		
			<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
			<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
			<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/googleapis/0.0.4/googleapis.min.js"></script>
			<script type="text/javascript" src="//ajax.googleapis.com/jsapi"></script>
			<script type="text/javascript">
			  google.load("identitytoolkit", "1.0", {packages: ["ac"]});
			</script>
			<script type="text/javascript">
				$(function() {
				  window.google.identitytoolkit.setConfig({
				    developerKey: "AIzaSyBMsyrQf4kbYrf9b8kqdj0hjg4alHaqZSc",
				    companyName: "Google",
				    callbackUrl: "{{host_url}}/gitcallback.do",
				    realm: "",
				    userStatusUrl: "{{host_url}}/gitlogin.do",
				    loginUrl: "{{host_url}}/gitlogin.do",
				    signupUrl: "{{host_url}}/signup.do",
				    homeUrl: "{{host_url}}/",
				    logoutUrl: "{{host_url}}/signout.do",
				    language: "en",
				    idps: ["Gmail", "Yahoo", "AOL", "Hotmail"],
				    tryFederatedFirst: true,
				    useCachedUserStatus: false
				  });
				  $("#navbar").accountChooser();

				  {% if email %}
				    var options = {}
				  	options['email'] = '{{email}}';
				  	options['displayName'] = '{{display_name}}';
				  	options['legacy'] = {{legacy}};
				  	options['photoUrl'] = '{{photo_url}}';
				  	window.google.identitytoolkit.updateSavedAccount(options);
				  	window.google.identitytoolkit.showSavedAccount(options.email);
				  {% endif %}
			});
			</script>
		
			<div style="margin-top:10px;">
				<div id="content" style="width:380px;float:left;margin-top:20px;">
					<div class="title">
						<div class="fl">Top News</div>
						<div class="fr" style="font-size:10px;color:#929292;font-weight:normal">updated until {{top_news_date}}</div>
						<div class="clear"></div>
					</div>
					<div class="topnews">
						<ul>
							{% for topnews in top_news_list %}
								{% if forloop.counter <= 10 %}
								<li style="width:380px;background:url('/images/{{forloop.counter}}.gif') 0 5px no-repeat;text-indent:17px;">{{key}}<a href="{{ topnews.url }}" title="{{ topnews.title }}" target=_blank>{{ topnews.title }}</a></li>
								{% endif %}
							{% endfor %}
							
						</ul>
					</div>
				</div>
				
				<div style="float:left;width:340px;margin-left:20px;margin-top:20px;">
					<div class="title">
						<div class="fl">Top Funs</div>
						<div class="fr" style="font-size:10px;color:#929292;font-weight:normal">updated until {{fun_news_date}}</div>
						<div class="clear"></div>
					</div>
					<div class="funnews">
						<ul>
							{% for news in fun_news_list %}
								{% if news.snapshot %}
									{% if forloop.counter <= 6 %}
								<li style="width:112px;float:left;text-align:center">
									<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
									<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden;font-size:12px;">{{news.title}}</div>
								</li>
									{% endif %}
								{% endif %}
							{% endfor %}
							
						</ul>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			
			
			<div style="margin-top:5px;">
				<div class="title">
					<div class="fl">Popular Contents</div>
					<div class="fr" style="font-size:10px;color:#929292;font-weight:normal">updated until {{fun_news_date}}</div>
					<div class="clear"></div>
				</div>
				
				<div class="newstab">
					<ul>
						<li style="width:20px"></li>
						<li class="selected">Popular</li>
						<li>World</li>
						<li>Sci</li>
						<li>Business</li>
						<li>Sports</li>
						<li>Health</li>
						<li style="width:20px"></li>
					</ul>
					
					<div class="clear"></div>
				</div>
				
				<div class="content" id="popular">
					<div class="image_section">
						<ul>
						{% for news in popular_news_list %}
							{% if news.snapshot %}
								{% if forloop.counter <= 8 %}
							<li style="width:112px;float:left;text-align:center">
								<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
								<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden">{{news.title}}</div>
							</li>
								{% endif %}
							{% endif %}
						{% endfor %}
						</ul>
					</div>
					<div class="link_section">
						<ul>
						{% for news in popular_news_list %}
							{% if forloop.counter <= 20 %}
							<li><a href="{{ news.url }}" title="{{ news.title }}" target=_blank>{{ news.title }}</a></li>
							{% endif %}
						{% endfor %}
						</ul>
					</div>
				</div>
				
				<div class="content" id="world" style="display:none">
					<div class="image_section">
						<ul>
						{% for news in world_news_list %}
							{% if news.snapshot %}
								{% if forloop.counter <= 8 %}
							<li style="width:112px;float:left;text-align:center">
								<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
								<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden">{{news.title}}</div>
							</li>
								{% endif %}
							{% endif %}
						{% endfor %}
						</ul>
					</div>
					<div class="link_section">
						<ul>
						{% for news in world_news_list %}
							{% if forloop.counter <= 20 %}
							<li><a href="{{ news.url }}" title="{{ news.title }}" target=_blank>{{ news.title }}</a></li>
							{% endif %}
						{% endfor %}
						</ul>
					</div>
				</div>
				
				<div class="content" id="sci" style="display:none">
					<div class="image_section">
						<ul>
						{% for news in sci_news_list %}
							{% if news.snapshot %}
								{% if forloop.counter <= 8 %}
							<li style="width:112px;float:left;text-align:center">
								<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
								<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden">{{news.title}}</div>
							</li>
								{% endif %}
							{% endif %}
						{% endfor %}
						</ul>
					</div>
					<div class="link_section">
						<ul>
						{% for news in sci_news_list %}
							{% if forloop.counter <= 20 %}
							<li><a href="{{ news.url }}" title="{{ news.title }}" target=_blank>{{ news.title }}</a></li>
							{% endif %}
						{% endfor %}
						</ul>
					</div>
				</div>
				
				<div class="content" id="business" style="display:none">
					<div class="image_section">
						<ul>
						{% for news in business_news_list %}
							{% if news.snapshot %}
								{% if forloop.counter <= 8 %}
							<li style="width:112px;float:left;text-align:center">
								<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
								<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden">{{news.title}}</div>
							</li>
								{% endif %}
							{% endif %}
						{% endfor %}
						</ul>
					</div>
					<div class="link_section">
						<ul>
						{% for news in business_news_list %}
							{% if forloop.counter <= 20 %}
							<li><a href="{{ news.url }}" title="{{ news.title }}" target=_blank>{{ news.title }}</a></li>
							{% endif %}
						{% endfor %}
						</ul>
					</div>
				</div>
				
				<div class="content" id="sports" style="display:none">
					<div class="image_section">
						<ul>
						{% for news in sports_news_list %}
							{% if news.snapshot %}
								{% if forloop.counter <= 8 %}
							<li style="width:112px;float:left;text-align:center">
								<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
								<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden">{{news.title}}</div>
							</li>
								{% endif %}
							{% endif %}
						{% endfor %}
						</ul>
					</div>
					<div class="link_section">
						<ul>
						{% for news in sports_news_list %}
							{% if forloop.counter <= 20 %}
							<li><a href="{{ news.url }}" title="{{ news.title }}" target=_blank>{{ news.title }}</a></li>
							{% endif %}
						{% endfor %}
						</ul>
					</div>
				</div>
				
				<div class="content" id="health" style="display:none">
					<div class="image_section">
						<ul>
						{% for news in health_news_list %}
							{% if news.snapshot %}
								{% if forloop.counter <= 8 %}
							<li style="width:112px;float:left;text-align:center">
								<a href="{{ news.url }}" target=_blank><img src="{{ news.snapshot }}"  title="{{ news.title }}" border=0/></a><br>
								<div class="color" style="margin-left:10px;width:80%;text-align:center;height:25px;line-height:25px;overflow:hidden">{{news.title}}</div>
							</li>
								{% endif %}
							{% endif %}
						{% endfor %}
						</ul>
					</div>
					<div class="link_section">
						<ul>
						{% for news in health_news_list %}
							{% if forloop.counter <= 20 %}
							<li><a href="{{ news.url }}" title="{{ news.title }}" target=_blank>{{ news.title }}</a></li>
							{% endif %}
						{% endfor %}
						</ul>
					</div>
				</div>
				
				<div class="clear"></div>
				
			</div>
			
			<div class="footer">
				<div style="width:100%;margin-top:10px;text-align:center;" class="color">
					Powered by Google Identity Toolkit Team, 2010/06/21
				<div>
			</div>
		
		</div>
		
		
		<script>
		
		$(document).ready(function() {
			setTimeout(function() {$('#email').focus();}, 200);
			
			var lastSelectedTab = $('.newstab li.selected'); 
			$('.newstab li').mouseover(function() {
				if ($(this).text() && $(this).text() != lastSelectedTab.text()) {
					var id = $(this).text().toLowerCase();
					var last_id = lastSelectedTab.text().toLowerCase();
					lastSelectedTab.removeClass('selected');
					$(this).addClass('selected');
					lastSelectedTab = $(this);
					
					$('#' + id).css('display', 'block');
					$('#' + last_id).css('display', 'none');
				}
			});
		});
		
		
		
		
		</script>
	</body>
</html>
